<template>
  <div class="my">
    <!-- 头部 -->
    <header>
      <div v-if="isLogin" class="login banner">
        <van-row></van-row>
        <van-row>
          <van-col offset="1" span="11">
            <van-row type="flex" align="center">  
              <van-image
                width="1.5rem"
                height="1.5rem"
                round
                :src="userInfo.photo"
              />
              <span style="color:#fff;font-size:0.4rem;margin-left:0.4rem">{{userInfo.name}}</span>
            </van-row>
          </van-col>
          <van-col
          span="6"
          offset="6"
          style="height:100%;display:flex;align-items:center"
          >
          <van-button
          type="defult"
          size="mini"
          round
          style="height:0.42667rem"
          @click="$router.push('/user')"
          >编辑资料</van-button>
          </van-col>
        </van-row>
        <van-row>
          <van-grid class="grid" :border="false">
  <van-grid-item  text="头条" > 
  <template #icon>{{userInfo.art_count}}</template>
  </van-grid-item>

  <van-grid-item  text="粉丝" > 
    <template #icon>{{userInfo.fans_count}}</template>
    </van-grid-item>

  <van-grid-item  text="关注" > 
    <template #icon>{{userInfo.follow_count}}</template>
    </van-grid-item>

  <van-grid-item  text="获赞" > 
    <template #icon>{{userInfo.like_count}}</template>
    </van-grid-item>
</van-grid>
        </van-row>
      </div>
      <div v-else class="logout banner">
        <div class="img-wrap" @click="$router.push('/login')">
          <van-image
            width="1.76rem"
            height="1.76rem"
            :src="require('@/assets/images/mobile.png')"
          />
          <span class="text">登录 / 注册</span>
        </div>
      </div>
    </header>
    <!-- 主体 -->
    <main>
     <div>
       <van-grid :column-num="2" class="grid-2" clickable>
  <van-grid-item text="收藏" >
    <template #icon>
      <span class="toutiao toutiao-shoucang"></span>
    </template>
    </van-grid-item>

  <van-grid-item text="历史" >
    <template #icon>
      <span class="toutiao toutiao-lishi"></span>
    </template>
    </van-grid-item>
  </van-grid>
     </div>
     <div class="link">
       <van-cell title="消息通知"  is-link/>
        <van-cell title="小智同学"  is-link/>
     </div>
    </main>
    <!-- 底部 -->
    <footer>
      <van-button 
      v-if="isLogin" 
      class="exit"
      block
      @click="logout"
        >退出</van-button
      >
    </footer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {getUserInfoAPI} from '@/api'
// import imgSrc from '@/assets/images/mobile.png'
export default {
  data() {
    return {
      // imgSrc
      userInfo:{}
    };
  },
  created(){
    this.getUserInfo()
  },
  computed: {
    ...mapGetters(["isLogin"]),
  },
  methods:{
    async logout(){
      try{
        await this.$dialog.confirm({
          title:'易烊千玺',
          message:'是否确认退出该账号'
        })
       this.$store.commit('SET_TOKEN', {})
      }catch{}
    },
    async getUserInfo(){
      if(this.isLogin){
        const {data}=await getUserInfoAPI()
        this.userInfo=data.data
      }
    }
  }
};
</script>

<style scoped lang="less">
.my{
  height: calc(100vh - 100px);
  background-color:#f5f7f9;
}
.link{
  margin: 10px 0;
}
.banner {
  width: 100%;
  height: 5.33333rem;
  background: url("@/assets/images/banner.png") no-repeat 0 0 / cover;
}
.logout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .img-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .text {
    color: #fff;
    font-size: 0.4rem;
    margin-top: 0.26667rem;
  }
}
.login {
  display: flex;
  flex-direction: column;
  > .van-row {
    flex: 1;
  }
}
:deep(.grid){
  color:#fff;
  .van-grid-item__content{
    background-color: unset;
  }
  .van-grid-item__text{
    color:#fff;
  }
  .van-grid-item__icon-wrapper{
    font-size: 0.4rem;
  }
  
}
.grid-2{
    .toutiao{
      font-size: 40px;
    }
    .toutiao-shoucang{
      color: red;
    }
    .toutiao-lishi{
      color: orange;
    }
  }
  .exit{
    .van-button__text{
      color: red;
    }
  }
</style>
